<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight" style="display: flex;justify-content: space-between;">
          <div class="report_header_left"></div>
          <div :style="{'height': (headerType==false ? '41px':'')}" style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;">
            <div class="report_header_date">
              <queryDate :beginDate="query.beginDate" :endDate="query.endDate" @queryDateClick='queryDateClick'></queryDate>
            </div>
            <div class="report_header_query">
              <queryOffice @queryOfficeClick="queryOfficeClick" :officeId='query.officeId'></queryOffice>
            </div>
            <div class="report_header_query">
              <queryShop @queryShopClick='queryShopClick' :shopname='shopname'></queryShop>
            </div>
            <div class="report_header_query">
              <queryMember :membername='membername' @queryMemberClick="queryMemberClick"></queryMember>
            </div>
            <div class="report_header_query">
              <queryProduct :proname="proname"  @queryProductClick='queryProductClick'></queryProduct>
            </div>
           <div class="report_header_query">
              <queryProductCategory @queryProductCategoryClick="queryProductCategoryClick" :productId="query.productCategoryId"></queryProductCategory>
            </div>
          </div>
          <div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="loadOrder">查询</el-button>
          <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport"  name="导出" />
          </div>
          <!-- <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 5px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">
            <i style="font-size: 24px;color: white;" :class="[headerType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>
          </div> -->
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;" >
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length-1?'总计':scope.$index +1}}</template>
          </el-table-column>
           <el-table-column prop="orderDate" label="销售日期" header-align="center" align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column align="center" prop="orderSn" header-align="center" width="120" label="订单号">
          </el-table-column>
             <el-table-column align="center" prop="shopName" header-align="center" width="150" label="所在仓库">
          </el-table-column>

          <el-table-column align="center" prop="memberName" header-align="center" width="150" label="客户名称">
          </el-table-column>
          <el-table-column align="center" prop="memberCode" header-align="center" width="100" label="客户编号">
          </el-table-column>
          <el-table-column prop="name" label="商品名称" header-align="center" :show-overflow-tooltip="true" width="150">
          </el-table-column>
           <el-table-column prop="sn" label="商品编号" header-align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="spec" width="120" header-align="center" :show-overflow-tooltip="true" label="规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="50" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="quantity" label="数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="100" header-align="center" label="单价">
            <template slot-scope="scope">{{ scope.row.price == null?'':scope.row.price }}</template>
          </el-table-column>
          <el-table-column align="right" prop="discount" label="店铺优惠" header-align="center" width="100">
          </el-table-column>
          <el-table-column align="right" prop="totalAmt" width="120" header-align="center" label="金额">
          </el-table-column>
          <el-table-column align="right" prop="cost" width="100" header-align="center" label="成本">
          </el-table-column>
          <el-table-column align="right" prop="totalCost" width="100" header-align="center" label="成本">
          </el-table-column>
          <el-table-column align="center" prop="maoli" width="100" header-align="center" label="毛利">
          </el-table-column>
          <el-table-column align="center" prop="maolilv" header-align="center" label="毛利率" width="100">
          </el-table-column>

            <el-table-column  label="单据类型" header-align="center" align="center" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
              <el-tag  v-if="scope.$index != tableData.length-1">{{scope.row.warehouseType | watchStatus}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="completeDate" width="180" align="center" header-align="center" label="出库日期">
          </el-table-column>
          <el-table-column align="center" prop="consignee" header-align="center" width="100" label="收件人">
          </el-table-column>
          <el-table-column align="center" prop="phone" header-align="center" width="120" label="收件人电话">
          </el-table-column>
          <el-table-column align="center" prop="address" header-align="center" width="250" label="收件人地址">
          </el-table-column>
          <el-table-column prop="createDate" width="180" align="center" header-align="center" label="制单日期">
          </el-table-column>
         <el-table-column align="center"  label="查看详情" width="100">
              <template slot-scope="scope">
              <div class="justify_right shop_Height"  @click="clicklook(scope.row)"  v-if="scope.$index != tableData.length-1">
              <a class="details_Title">查看订单</a>
            </div>
              </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Pagination from '@/components/Pagination';
  import ExportList2Excel from "@/components/ExportList2Excel";
  import {
    selectDetailList,
    warehouseSummary
  } from '@/api/report'
  import utils from '@/utils/utils'
  import permission from '@/directive/permission'
  //条件组件
  import queryDate from '@/components/Query/queryDate'
  import queryShop from '@/components/Query/queryShop'
  import queryOffice from '@/components/Query/queryOffice'
  import queryProduct from '@/components/Query/queryProduct'
  import queryMember from '@/components/Query/queryMember'
  import queryProductCategory from '@/components/Query/queryProductCategory'
  import { dateList, summary } from '@/api/receiveReport'
  export default {
    name:"warehouseSaleReport-detailed",
    data() {
      return {
        membername:"",
        shopname:"",
        proname:"",
        printing:10000,
        query: {
          shopId: '',
          productCategoryId: '',
          officeId: '',
          endDate: '',
          beginDate: '',
          productId: '',
          memberId: ''
        },
        tableData: [],
        curHeight: null,
        pageSize: 20,
        total: 0,
        pageNum: 1,
        summaryForm: {
          quantity: 0,
          discount: 0,
          totalCost: 0,
          maoli: 0,
          maolilv: 0,
          totalAmt: 0
        },
        headerType:false
      }
    },
    directives: {
      elDragDialog
    },
    created() {
      var _this = this
      // _this.summaryClick()
     if(this.$route.query.productId==null){
            this.query.productId=""
        }else{

            this.query.productId = this.$route.query.productId;
        }
        this.loadOrder()
      this.query.beginDate=this.$route.query.beginDate,
      this.query.endDate=this.$route.query.endDate,
      this.query.officeId=this.$route.query.officeId,
      this.shopname=this.$route.query.shopname,
      this.membername=this.$route.query.membername,
      this.proname=this.$route.query.proname
      this.query.productCategoryId=this.$route.query.productCategoryId
      // this.query.suppName=this.$route.query.suppName

    },
    components: {
      Pagination,
      queryDate,
      queryShop,
      queryOffice,
      queryProduct,
      queryMember,
      queryProductCategory,
      ExportList2Excel
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
     filters: {
    watchStatus(val) {
      if (val == 1) {
        return '采购入库'
      } else if (val == 2) {
        return '采购退货'
      }else if (val == 3) {
        return '调拨入库'
      }else if (val == 4) {
        return '销售出库'
      }else if (val == 5) {
        return '销售退货'
      }else if (val == 6) {
        return '调拨出库'
      }else if (val == 7) {
        return '盘点损益'
      }else if (val == 8) {
        return '其他出库'
      }
    },
    },
    methods: {
       watchStatus(val) {
      if (val == 1) {
        return '采购入库'
      } else if (val == 2) {
        return '采购退货'
      }else if (val == 3) {
        return '调拨入库'
      }else if (val == 4) {
        return '销售出库'
      }else if (val == 5) {
        return '销售退货'
      }else if (val == 6) {
        return '调拨出库'
      }else if (val == 7) {
        return '盘点损益'
      }else if (val == 8) {
        return '其他出库'
      }
    },


    clicklook(data){
        console.log(data.warehouseType);
        //采购入库
        if(data.warehouseType==1){
           this.$router.push({ path: '/purchasein/view', query: { id: data.warehouseId}})
        }
        //采购退货
        else if(data.warehouseType==2){
          this.$router.push({path: '/purchaseout/view', query: { id: data.warehouseId }})
          }
        else if(data.warehouseType==4){
          this.$router.push({path: '/saleout/view', query: { id: data.warehouseId }})
          }
        else if(data.warehouseType==5){
          this.$router.push({path: '/salein/view', query: { id: data.warehouseId }})
          }
     },

      //下载模板的函数
      handleExport() {
        let _this= this
        var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //要导出函数携带的参数
        //要导出函数携带的参数
        let data ={}
        // data.tHeader = ["货号","名称","规格","单位",'客户名称','客户编号','收件人','收件人电话',"出库数量","出库单价","店铺优惠",'出库金额','成本单价',"成本金额",'毛利','毛利率']
        // data.filterVal = ["sn","name","spec","unit",'memberName','memberCode','consignee','phone',"quantity","price","discount",'totalAmt','cost',"totalCost",'maoli','maolilv']
         data.tHeader = ["出库日期",'所在仓库',"客户名称","客户编号","商品名称","商品编号", "规格", "单位","出库数量", "出库单价", "优惠金额","成本单价", '出库金额','毛利','毛利率',"订单号","单据类型",'收件人','收件人电话',"收获地址",'制单日期']
        data.filterVal = ["orderDate",'shopName',"memberName","memberCode","name","sn", "spec", "unit","quantity", "price", "discount","cost", 'totalAmt','maoli','maolilv',"orderSn","warehouseType",'consignee','phone',"address",'createDate' ]
        data.filename = "出库明细列表";
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.printing)
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('officeId', this.query.officeId)
        params.append('shopId', this.query.shopId)
        params.append('productCategoryId', this.query.productCategoryId)
        params.append('productId', this.query.productId)
        params.append('memberId', this.query.memberId)
        selectDetailList(params).then(res=>{
          res.data.data.forEach(item=>{
            if (item.maolilv==null){
              item.maolilv=0
            }
            item.maolilv=item.maolilv+'%'
               if (item.maoli==null){
              item.maoli=0
            }
             if(item.orderDate!=null){
              item.orderDate=item.orderDate.split(" ")
              item.orderDate=item.orderDate[0]
            }
          item.warehouseType=this.watchStatus(item.warehouseType)
          })
          data.list=res.data.data
          warehouseSummary(params).then(response=>{
            if (utils.isNull( response.data[0].sn)){
              response.data[0].sn='合计'
              response.data[0].maolilv=response.data[0].maolilv+'%'
              data.list.push(response.data[0])
              _this.$refs.exportList2Excel.handleDownload(data);
            }else{
              loading.close();
            }
            loading.close();

          })
          if(data.list.length==this.printing){
            this.pageNum++
             console.log(this.pageNum);
             this.handleExport()
          }
          else{
            return;
          }
        }).catch(error=>{
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })

        setTimeout(()=>{
          loading.close();
        },1000)
        _this.$refs.exportList2Excel.handleDownload(data);
      },
      queryDateClick(data) {
        this.query.beginDate = data.beginDate
        this.query.endDate = data.endDate
      },
      queryShopClick(data){
         console.log(data)
         this.query.shopId = data.shopId
      },
      queryOfficeClick(data){
        this.query.officeId = data.officeId
      },
      queryProductClick(data){
        this.query.productId = data.productId
      },
      queryMemberClick(data){
        this.query.memberId = data.memberId
      },
      queryProductCategoryClick(data){
        this.query.productCategoryId = data.productCategoryId
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            var headerHeight = _this.$refs.headerHeight.clientHeight
            _this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        console.log('222')
        var _this = this
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        var headerHeight = _this.$refs.headerHeight.clientHeight
        this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
      },
      loadOrder() {
        var _this = this
        console.log(this.query)
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('officeId', this.query.officeId)
        params.append('shopId', this.query.shopId)
        params.append('productCategoryId', this.query.productCategoryId)
        params.append('productId', this.query.productId)
        params.append('memberId', this.query.memberId)
        selectDetailList(params).then(response => {
          response.data.data.forEach(item=>{
            if (item.maolilv==null){
              item.maolilv=0
            }
            item.maolilv=item.maolilv+'%'
               if (item.maoli==null){
              item.maoli=0
            }
            if( item.orderDate!=null){
              item.orderDate=item.orderDate.split(" ")
              item.orderDate=item.orderDate[0]
            }
          })
          _this.tableData = response.data.data
          _this.total = response.data.total
          _this.summaryClick()
        }).catch(error => {})

      },
      summaryClick() {
        var _this = this
        const params = new URLSearchParams()
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('officeId', this.query.officeId)
        params.append('shopId', this.query.shopId)
        params.append('productCategoryId', this.query.productCategoryId)
        params.append('productId', this.query.productId)
        params.append('memberId', this.query.memberId)
        warehouseSummary(params).then(response => {

          // _this.summaryForm = response.data[0]
           if(response.data[0]!=null&&response.data.length>0){
          if ( response.data[0].maolilv==null){
            response.data[0].maolilv=0
          }
          response.data[0].maolilv=response.data[0].maolilv+'%'
           _this.tableData.push(response.data[0])
        }
        }).catch(error => {})
      },
      totalLine({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        var _this = this
        if (rowIndex === _this.tableData.length - 1) {
          if (columnIndex === 0) {
            return {
              rowspan: 1,
              colspan: 5
            };
          } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      chooseClick(){
        this.headerType = !this.headerType
        this.comeIn()
      }
    }
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }
  /deep/.el-header {
    padding: 10px;
    height: 100% !important;
    padding-bottom: 0;
  }
      .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
.justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
  }


  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 130px;
    margin-top: 5px;
  }

  .report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
    margin-top: 5px;
  }

  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }

  /deep/.el-footer {
    padding: 10px;
    padding-top: 0;
  }

  .report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }





  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    background-color: white;
  }

  /deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #F5F7FA;
  }

  /deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
  }

  /deep/.el-table::before {
    height: 0px;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
  }

  /deep/.pagination-container {
    margin-top: 0 !important;
  }
</style>
